<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="ticket-dialog" v-if="visible">
                <div class="ticket-dialog__mask"></div>
                <div class="ticket-dialog__content">
                    <div class="ticket-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close.svg`" />
                    </div>

                    <div class="ticket-dialog__title">门票列表</div>

                    <!-- <div class="tabs">
                        <div class="tab-item" :class="{ active: tabActive == item.value }" v-for="item in tabs"
                            :key="item.value">{{ item.label }}</div>
                    </div> -->

                    <el-table :border="true" :data="list" :max-height="480" style="width: 100%;">
                        <el-table-column prop="code" label="兑换码">
                            <template #default="scope">
                                <div class="code-group">
                                    {{ scope.row.code }}
                                    <el-icon @click="onCopy(scope.row.code)" :size="18" color="#5085fb"
                                        style="cursor: pointer">
                                        <CopyDocument />
                                    </el-icon>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="状态" width="80" align="center">
                            <template #default="scope">
                                {{ scope.row.useagtime ? "已使用" : "" }}
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="180" align="center">
                            <template #default="scope">
                                <el-button type="text" @click="onShare(scope.row)"
                                    v-if="scope.row.is_share == 0">分享</el-button>

                                <template v-else>
                                    <!--判读是否分享成功 -->
                                    <template v-if="scope.row.share_status == 0">
                                        <el-button type="text" @click="onShowShare(scope.row)">查看分享</el-button>
                                        <el-button type="text" @click="onCancelShare(scope.row)">取消分享</el-button>
                                    </template>
                                    <span v-else>已领取</span>
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </transition>
    </Teleport>

    <LazyDialogTicketShareP ref="dialogTicketRef" />
</template>
<script setup>
import { CopyDocument } from "@element-plus/icons-vue";
import { GetTicketDetail, TicketShare, TicketCancelShare } from "~/api";

const visible = ref(false);
const list = ref([]);
const dialogTicketRef = ref(null);

const tabActive = ref(0);
const tabs = reactive([
    {
        label: "全部",
        value: 0
    },
    {
        label: "已使用",
        value: 1
    },
    {
        label: "未使用",
        value: 2
    },
    {
        label: "分享中",
        value: 3
    },
    {
        label: "已分享",
        value: 3
    }
]);
const work_id = ref(null);

const onClose = () => {
    visible.value = false;
    work_id.value = null;
    list.value = [];
}

const getDetail = async () => {
    const res = await GetTicketDetail({ work_id: work_id.value });

    if (res.code == 200) {
        list.value = res.data;
    }
}

const onCopy = (code) => {
    copy(code);

    Message().success("复制成功");
}

const onShare = async (row) => {
    const res = await TicketShare({ ticket_id: row.id });

    if (res.code == 200) {
        getDetail();
    }
}

const onCancelShare = async (row) => {
    const res = await TicketCancelShare({ ticket_id: row.id });

    if (res.code == 200) {
        getDetail();
    }
}

const onShowShare = (row) => {
    dialogTicketRef.value.open(row.share_code);
}

defineExpose({
    show(id) {
        visible.value = true;
        work_id.value = id;
        getDetail();
    }
})
</script>
<style lang="scss" scoped>
.ticket-dialog {

    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 650px;
        height: 550px;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        padding: 15px;

        .tabs {
            display: flex;
            margin-bottom: 20px;

            .tab-item {
                margin-right: 20px;
                cursor: pointer;

                &.active {
                    position: relative;

                    &::after {
                        content: "";
                        position: absolute;
                        bottom: -10px;
                        left: 50%;
                        width: 20px;
                        height: 5px;
                        background-color: #5085fb;
                        transform: translateX(-50%);
                        border-radius: 4px;
                    }
                }
            }
        }

        .code-group {
            display: flex;
            align-items: center;

            .el-icon {
                margin-left: 10px;
            }
        }
    }

    &__close {
        position: absolute;
        top: 0px;
        right: -40px;
        cursor: pointer;

        img {
            width: 30px;
            height: 30px;
        }
    }
}
</style>